<!DOCTYPE html>
<html>

<body>
    <form method="GET">
        <h4>输入姓名：</h4>
        First name:<br/>
        <input type="text" name="firstname">
        <br/>
        Last name:<br/>
        <input type="text" name="lastname">
        
        <br/>
        <h4>选择性别：</h4>
        <input type="radio" name="sex" value="male" checked>Male
        <br/>
        <input type="radio" name="sex" value="female" checked>Female
        <br/>
        <input type="submit" value="Submit">

        <br/><br/>

        <h4>下拉列表</h4>
        <select name="cars" id="cars">
            <option value="volvo">Volvo</option>
            <!-- 通过添加selected属性定义预定义选项 -->
            <option value="saab" selected>Saab</option>
            <option value="fiat">Fiat</option>
            <option value="audi">Audi</option>
        </select>

        <br/><br/>

        <textarea name="message" rows="10" cols="40">The cat was playing in the garden.</textarea>

        <br/><br/>

        <button type="button" onclick="alert('Hello World!')">Click Me!</button>

        <br><br>

        <input list="browsers">
        <datalist id="browsers">
            <option value="Internet Explorer">
            <option value="Firefox">
            <option value="Chrome">
            <option value="Opera">
            <option value="Safari">
        </datalist>

        <br><br>

        User name:<br>
        <input type="text" name="username">
        <br>
        User password:<br>
        <input type="password" name="psw">

        <br><br>

        <input type="checkbox" name="vehicle" value="Bike">I have a bike
        <br>
        <input type="checkbox" name="vehicle" value="Car">I have a car
    
        <br><br>

        Quantity (between 1 and 5):
        <input type="number" name="quantity" min="1" max="5">

        <br><br>

        Quantity:
        <input type="number" name="points" min="0" max="100" step="10" value="30">

        <hr>

        Birthday:
        <input type="date" name="bday">

        <hr>

        Enter a date before 1980-01-01:
        <input type="date" name="bday" max="1979-12-31"><br>
        Enter a date after 2000-01-01:
        <input type="date" name="bday" min="2000-01-02"><br>

        <hr>

        Select your favorite color:
        <input type="color" name="favcolor">

        <hr>

        <input type="range" name="points" min="0" max="10">

        <hr>

        Birthday (month and year):
        <input type="month" name="bdaymonth">

        <hr>

        Select a week:
        <input type="week" name="week_year">

        <hr>

        Select a time:
        <input type="time" name="usr_time">

        <hr>

        Birthday (date and time):
        <input type="datetime-local" name="bdaytime">

        <hr>

        E-mail:
        <input type="email" name="email">

        <hr>

        Search Google:
        <input type="search" name="googlesearch">
    </form>
</body>

</html>